<template>
  <div id="customer">
    <el-form :inline="true" style="margin-left: 17%">
        <el-form-item label="客户列表"></el-form-item>
    </el-form>
    <el-table
        :data="tableData"
        border
        style="width: 62.5%;margin: 0 auto;">
        <el-table-column
          fixed
          prop="account"
          label="账号"
          width="130">
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          width="100">
        </el-table-column>
        <el-table-column
          prop="operate"

          label="操作"
          width="420">
          <template scope="scope">
            <el-button @click="detailClick = true">详细信息</el-button>

            <el-dialog
                title="客户详细信息框"
                :visible.sync="detailClick"
				v-model="detailClick"
                size="tiny">
                <div style="margin-top: 15px">用户名：FishLao</div>
                <div style="margin-top: 15px">情感求助：啊啊啊~魔镜魔镜，全世界谁最美~~</div>
                <div style="margin-top: 15px">公开资料：身高 170，体重 250</div>
                <span slot="footer" class="dialog-footer">
                  <el-button @click="detailClick = false">取 消</el-button>
                  <el-button type="primary" @click="detailClick = false">确 定</el-button>
                </span>
            </el-dialog>
            <el-button @click="heartClick = true">心理测试情况</el-button>
                <el-dialog
                  title="心理测试情况"
                  :visible.sync="heartClick"
                  size="tiny">
                  <div style="margin-top: 15px">用户名：FishLao</div>
                  <div style="margin-top: 15px">测试卷名：情伤测试</div>
                  <div style="margin-top: 15px">结果评估：没有情，何来伤</div>
                  <span slot="footer" class="dialog-footer">
                    <el-button @click="heartClick = false">取 消</el-button>
                    <el-button type="primary" @click="heartClick = false">确 定</el-button>
                  </span>
                </el-dialog>
            <el-button @click="firendClick = true">已推荐对象</el-button>

                <el-dialog
                title="已推荐对象"
                :visible.sync="firendClick">
                   <el-table
                      :data="tableData"
                      style="width: 80%;margin: 0 auto;">
                      <el-table-column
                        prop="account"
                        label="账号"
                        width="120">
                      </el-table-column>
                      <el-table-column
                        prop="name"
                        label="姓名"
                        width="100">
                      </el-table-column>
                      <el-table-column
                        prop="province"
                        label="简要信息"
                        width="120">
                      </el-table-column>
                      <el-table-column
                        prop="operate"
                        label="操作"
                        width="160">
                        <template scope="scope">
                          <el-button @click="deleteDialogFormVisible" type="text" size="middle">删除</el-button>
                        </template>
                      </el-table-column>
                    </el-table>
                  </el-dialog>
                          <el-button @click="addDialogFormVisible" type="text" size="middle">推荐</el-button>
                  </template>
                </el-table-column>        
              </el-table >
			  <el-pagination
			  :class="['pager']"
			  layout="prev, pager, next"
			  :total="1000">
			</el-pagination>
  </div>
</template>

<script>
  export default {
    name: 'customer',
    data(){
return {
		checkDialogFormVisible:false,
        tableData: [{
          account:"FishLao",
          name:"劳慧敏",
        }, {
          account:"过亿坤",
          name:"郭逸坤",
        }, {
          account:"黄梅戏",
          name:"黄明星",
        }, {
          account:"老王钱",
          name:"廖文谦",
        }, {
          account:"离家近",
          name:"罗家劲",
        }, {
          account:"拆塔",
          name:"陈涛",
        }, {
          account:"海绵胖",
          name:"黄茂鹏",
        }],

        input: '',
        detailClick: false,
        heartClick: false,
        firendClick: false,
      }
    },
    methods:{
handleClick() {
        console.log("tabletable~~~~~~~");
      },
        deleteDialogFormVisible() {
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
                      });          
                     });      },
      addDialogFormVisible() {
        this.$prompt('添加推荐对象', '提示', {
        }).then(({ value }) => {
          this.$message({
            type: 'success',
            message: '确认推荐' 
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
      }
    }
  }
</script>

<style scoped>
  #customer{

  }
  .pager{
	margin: 10px 0px 10px 190px;
	}
</style>